<template>
	<el-dialog title="用户修改" :visible.sync="visible" width="700px" :center="false" >
		<div slot="title" class="dialog-header-title">
			<i class="el-icon-edit" style="color: #FFF"></i>&nbsp;
			<span style="color: #FFF">用户修改</span>
		</div>

		<div class="smp-search">
			<el-form :inline="false" label-width="100px" size="mini" ref="form" :model="form" :rules="rules">
				<el-row>
					<el-col :span="24">
						<el-form-item label="用户名:" prop="userName">
							<el-input v-model="form.userName" :disabled="true" placeholder="请输入用户名"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="用户中文名:" prop="userChineseName">
							<el-input v-model="form.userChineseName" :disabled="true" placeholder="请输入用户中文名"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="用户拼音名:" prop="pinyin" >
							<el-input v-model="form.pinyin" :disabled="true" placeholder="请输入用户拼音名"></el-input>
						</el-form-item>
					</el-col>
					
					<!-- <el-col :span="12">
						<el-form-item label="部门:" prop="department">
							<el-input v-model="form.department"  placeholder="请输入部门"></el-input>
						</el-form-item>
					</el-col> -->
					<el-col :span="24">
						<el-form-item label="部门:" prop="department">
							<el-select v-model="form.department" style="width: 100%" filterable remote reserve-keyword
								placeholder="请输部门"
								:loading="proLoading"
								:remote-method="getOrgPathList" >
								<el-option v-for="item in orgList" :key="item.seqCate" :label="item.orgName" :value="item.seqCate">
									<span style="float: left;margin-left: 3px;">{{ item.seqCate }}</span>
									<span style="float: right;margin-right: 3px;">{{ item.orgName }}</span>
								</el-option>
							</el-select>	
						</el-form-item>
					</el-col>
					
					
					<el-col :span="24">
						<el-form-item label="联系电话:" prop="phone" >
							<el-input v-model="form.phone" placeholder="请输入联系电话"> </el-input>
						</el-form-item> 
					</el-col>
					
					<el-col :span="24">
						<el-form-item label="状态:" prop="status" >
							<el-select v-model="form.status" placeholder="" style="width: 100%;" >
								<el-option v-for="item in dict('SMP0005')" :key="item.itemCode"
									:label="item.itemName" :value="item.itemCode">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					
					<el-col :span="24">
						<el-form-item label="用户角色:" prop="" style="text-align: left;" >
							<el-checkbox-group v-model="form.userRoles">
								<template v-for="role in roles">
									<el-checkbox  :label="role.id">{{role.roleName}}</el-checkbox>
								</template>
								
							</el-checkbox-group>
						</el-form-item> 
						
						
					<!-- <el-form-item label="状态:" prop="status" >
						<el-select v-model="form.status" placeholder="" style="width: 100%;">
							<el-option label="有效"value="1"></el-option>
							<el-option label="无效"value="0"></el-option>
						</el-select>
					</el-form-item> -->
					</el-col>
				</el-row>
			</el-form>
		</div>
		<span slot="footer" class="dialog-footer">
			<!-- <el-button @click="visible = false" size="mini">取 消</el-button>
			<el-button type="primary" @click="submit" size="mini">确 定</el-button>
			 -->
			<el-button type="primary" plain @click="submit" size="mini">
				<i class="el-icon-check"></i>
				确定</el-button>
			<el-button @click="visible = false" size="mini">
				<i class="el-icon-close"></i>
				取消</el-button>
		</span>
	</el-dialog>
</template>
<script>
	"use strict";
import {updateUser} from '@/api/user.js';
import {getRoles,getRoleByUserName} from '@/api/role.js';
import {getOrgList} from '@/api/org.js';
	export default {
		data() {
			return {
				visible: false,
				orgList:[],
				proLoading:false,
				form: {
					userName: "",
					userChineseName: "",
					phone: "",
					status: "",
					pinyin: "",
					department: "",
					orgName:"",
					userRoles:[],
				},
				roles:[],
				rules: {
					userName: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}],
					userChineseName: [{
						required: true,
						message: '请输入用户中文名',
						trigger: 'blur'
					}],
					phone: [{
						required: true,
						message: '请输入联系电话',
						trigger: 'blur'
					}],
					pinyin: [{
						required: true,
						message: '请输入用户拼音名',
						trigger: 'blur'
					}],
					department: [{
						required: true,
						message: '请输入部门',
						trigger: 'blur'
					}],
					status: [{
						required: true,
						message: '请选择状态',
						trigger: 'blur'
					}],
				}
			}

		},
		created() {
		},
		
		methods: {
			init(){
				getRoles().then(response => {
					this.roles = response.data.extend;
				}).catch(error => {
					console.info("失败");
					console.info(error.message);
				});
				
				getRoleByUserName({"userName":this.form.userName}).then(response => {
					this.list = response.data.extend;
					
					if(this.list){
						this.form.userRoles =[];
						this.list.forEach(el =>{	
							/* for(let i = 0;i <　this.tableData.length; i++){
								if(el.id == this.tableData[i].id){
									this.$refs.multipleTable.toggleRowSelection(this.tableData[i]);
								}
							} */
							this.form.userRoles.push(el.id)
						})
					}
				}).catch(error => {
					console.info("失败");
					console.info(error.message);
				});
			},
			
			
			
			
			
			ShowDialog(row) {
			   Object.assign(this.form,row);
			   this.init();
			   this.getOrgPathList(this.form.department);
			   this.visible = true;
			},
			handleCancel(e) {
				this.visible = false;
			},
			submit() {//新增
				this.$refs["form"].validate((valid)=>{
					if(valid){
						updateUser(this.form).then(response => {
							if(response.data.code == "0000"){
								this.$message.success(response.data.message);
							}else{
								this.$message.error(response.data.message);
							}
							this.visible = false;
							this.$emit("fresh")
						}).catch(error => {
							this.$message.error(error.message);
						});
						
					}
				});
			},
			
			getOrgPathList(query){
				if(query!=''){
					this.proLoading = true;
					getOrgList({"seqCate":query}).then(response => {
					this.orgList = response.data.extend;
					this.proLoading = false;
				});
				}
			},
		}
	};
</script>
